<template>
  <div>

    <el-form
      ref="form"
      class="form-search-panel"
      label-position="right"
      label-width="80px"
      :model="formdata"
    >

      <sky-card shadow="hover" class="clearfix">

        <el-form-item
          label="合同名称"
          prop="contractName"
          :rules="[
            { required: true, message: '请输入内容', trigger: 'blur' }
          ]"
          class="w-300"
        >
          <el-input v-model="formdata['contractName']" />
        </el-form-item>
        <el-form-item
          label="合同编号"
          prop="contractNumber"
          :rules="[
            { required: true, message: '请输入内容', trigger: 'blur' }
          ]"
          class="w-300"
        >
          <el-input v-model="formdata['contractNumber']" />
        </el-form-item>
        <el-form-item
          label="合同类别"
          prop="contractCategory"
          :rules="[
            { required: true, message: '请输入内容', trigger: 'blur' }
          ]"
          class="w-300"
        >
          <el-input v-model="formdata['contractCategory']" />
        </el-form-item>
        <el-form-item
          label="合同性质"
          prop="contractNature"
          :rules="[
            { required: true, message: '请输入内容', trigger: 'blur' }
          ]"
          class="w-300"
        >
          <el-input v-model="formdata['contractNature']" />
        </el-form-item>
        <el-form-item
          label="施工面积"
          prop="constructionArea"
          :rules="[
            { required: true, message: '请输入内容', trigger: 'blur' }
          ]"
          class="w-300"
        >
          <el-input v-model="formdata['constructionArea']" />
        </el-form-item>
        <el-form-item
          label="主合同名称"
          prop="masterContractNmae"
          :rules="[
            { required: true, message: '请输入内容', trigger: 'blur' }
          ]"
          class="w-300"
        >
          <el-input v-model="formdata['masterContractNmae']" />
        </el-form-item>
        <el-form-item
          label="甲方单位"
          prop="partyAUnits"
          :rules="[
            { required: true, message: '请输入内容', trigger: 'blur' }
          ]"
          class="w-300"
        >
          <el-input v-model="formdata['partyAUnits']" />
        </el-form-item>
        <el-form-item
          label="乙方单位"
          prop="partyBUnits"
          :rules="[
            { required: true, message: '请输入内容', trigger: 'blur' }
          ]"
          class="w-300"
        >
          <el-input v-model="formdata['partyBUnits']" />
        </el-form-item>
        <el-form-item
          label="签约部门"
          prop="signingDepartment"
          :rules="[
            { required: true, message: '请输入内容', trigger: 'blur' }
          ]"
          class="w-300"
        >
          <el-input v-model="formdata['signingDepartment']" />
        </el-form-item>

      </sky-card>

      <sky-panel title="美的地产">
        <template #main>

          <sky-table ref="table1" v-slot="row" :data="formdata.listDataOne">
            <sky-column :row="row.scope" prop="name" label="名称" />
            <sky-column :row="row.scope" prop="billName" label="单据类型" />
            <sky-column :row="row.scope" prop="apportionedAmount" label="已分摊金额">
              <el-form-item
                label-width="0px"
                :prop="`listDataOne[${row.index}].apportionedAmount`"
                :rules="[
                  { required: true, message: '请输入科目', trigger: 'blur' }
                ]"
              >
                <el-input v-model="formdata.listDataOne[row.index].apportionedAmount" />
              </el-form-item>
            </sky-column>
            <sky-column :row="row.scope" prop="unapportionedAmount" label="未分摊金额">
              <el-form-item
                label-width="0px"
                :prop="`listDataOne[${row.index}].unapportionedAmount`"
                :rules="[
                  { required: true, message: '请输入科目', trigger: 'blur' }
                ]"
              >
                <el-input v-model="formdata.listDataOne[row.index].unapportionedAmount" />
              </el-form-item>
            </sky-column>
          </sky-table>

        </template>
      </sky-panel>

      <sky-panel title="旭辉地产">
        <template #main>

          <sky-table ref="table2" v-slot="row" :data="formdata.listDataTwo">
            <sky-column :row="row.scope" prop="name" label="名称" />
            <sky-column :row="row.scope" prop="billName" label="单据类型" />
            <sky-column :row="row.scope" prop="apportionedAmount" label="已分摊类型">
              <el-form-item
                label-width="0px"
                :prop="`listDataTwo[${row.index}].apportionedAmount`"
                :rules="[
                  { required: true, message: '请输入科目', trigger: 'blur' }
                ]"
              >
                <el-input v-model="formdata.listDataTwo[row.index].apportionedAmount" />
              </el-form-item>
            </sky-column>
            <sky-column :row="row.scope" prop="unapportionedAmount" label="未分摊类型">
              <el-form-item
                label-width="0px"
                :prop="`listDataTwo[${row.index}].unapportionedAmount`"
                :rules="[
                  { required: true, message: '请输入科目', trigger: 'blur' }
                ]"
              >
                <el-input v-model="formdata.listDataTwo[row.index].unapportionedAmount" />
              </el-form-item>
            </sky-column>
          </sky-table>

        </template>
      </sky-panel>

      <el-button type="primary" @click="search">查询</el-button>
      <el-button @click="reset">重置</el-button>

    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, inject } from 'vue'

export default defineComponent({
  setup() {
    const formdata = ref({
      contractName: '', // 合同名称
      contractNumber: '', // 合同编号
      contractCategory: '', // 合同类别
      contractNature: '', // 合同性质
      constructionArea: '', // 施工面积
      masterContractNmae: '', // 主合同名称
      partyAUnits: '', // 甲方单位
      partyBUnits: '', // 乙方单位
      signingDepartment: '', // 签约部门
      listDataOne: [
        {
          name: '人防工程监理',
          billName: '单据类型',
          apportionedAmount: '',
          unapportionedAmount: ''
        },
        {
          name: '人防工程监理',
          billName: '单据类型',
          apportionedAmount: '',
          unapportionedAmount: ''
        }, {
          name: '人防工程监理',
          billName: '单据类型',
          apportionedAmount: '',
          unapportionedAmount: ''
        }
      ],
      listDataTwo: [
        {
          name: '人防工程监理',
          billName: '单据类型',
          apportionedAmount: '',
          unapportionedAmount: ''
        },
        {
          name: '人防工程监理',
          billName: '单据类型',
          apportionedAmount: '',
          unapportionedAmount: ''
        }, {
          name: '人防工程监理',
          billName: '单据类型',
          apportionedAmount: '',
          unapportionedAmount: ''
        }
      ]
    })

    const form = ref()
    const useScrollToErrorFormItem = inject('useScrollToErrorFormItem') as any
    const search = () => {
      form.value.validate((valid: any) => {
        if (valid) {
          console.log(form.value)
          alert(JSON.stringify(form.value))
        } else {
          useScrollToErrorFormItem()
          console.log('error submit!!')
          return false
        }
      })
    }
    const reset = () => {
      form.value.resetFields()
    }
    return {
      form,
      search,
      reset,
      formdata
    }
  }
})
</script>

<style scoped>

</style>